@import "variables";

select-status{
  .select-box{
    position: relative;
    .select-top{
      display: flex;
      align-items: center;
      border-bottom: 1px solid color($h5,c9);
      p{
        width: 50%;
        text-align: center;
        line-height: pxTorem(100);
        height: pxTorem(100);
        font-size: standard($f, f3);
        color:color($h5,c2);
        span{
          display: inline-block;
          width: 0;
          height: 0;
          border-left:pxTorem(10) solid transparent;
          border-right: pxTorem(10) solid transparent;
          border-top: pxTorem(8) solid color($h5,c6);
          border-bottom: 0 solid transparent;
        }
      }
      p.active{
        color:color($h5,c1);
        span{
          border-bottom: pxTorem(8) solid color($h5,c1);
          border-top: 0 solid transparent;
        }
      }
    }
    .select-content{
      z-index: 99;
      position: absolute;
      top:100%;
      left: 0;
      background: color($h5,c10);
      width: 100%;
      p{
        font-size: standard($f, f3);
        color:color($h5,c4);
        padding-left: pxTorem(30);
        line-height: pxTorem(90);
        height: pxTorem(90);
        border-bottom: 1px solid color($h5,c9);
        position: relative;
      }
      p:last-child{
        border-bottom: 0px solid color($h5,c9);
      }
      p.active{
       color:color($h5,c1);
      }
      p.active:after{
          position: absolute;
          top:pxTorem(30);
          right: pxTorem(30);
          display: block;
          content: '';
          width: pxTorem(30);
          height: pxTorem(30);
          background: url(#{$icons-path}/choose.png) no-repeat center/contain;
          background-size: 100% 100%;
      }
    }
  }

}
